<script setup lang="ts">
import { useGameStore } from '@/stores/modules/game'

interface Item {
  color: string
  label: string
  value: number
}

const props = defineProps<{
  id: number
}>()

const items: Item[] = createItems()

function createItems() {
  const chefInfo = useGameStore().chefsMap.get(props.id)
  const items: Item[] = []
  if (chefInfo) {
    const techniques: Item[] = [
      {
        color: '#A73619',
        label: '炒',
        value: chefInfo.stirfry,
      },
      {
        color: '#9944AA',
        label: '烤',
        value: chefInfo.bake,
      },
      {
        color: '#79B920',
        label: '煮',
        value: chefInfo.boil,
      },
      {
        color: '#F69621',
        label: '蒸',
        value: chefInfo.steam,
      },
      {
        color: '#20A1BD',
        label: '炸',
        value: chefInfo.fry,
      },
      {
        color: '#9A6D38',
        label: '切',
        value: chefInfo.knife,
      },
    ]
    items.push(...techniques)

    const collect = [
      {
        color: '#861708',
        label: '肉',
        value: chefInfo.meat,
      },
      {
        color: '#535C71',
        label: '鱼',
        value: chefInfo.fish,
      },
      {
        color: '#4C782A',
        label: '菜',
        value: chefInfo.veg,
      },
      {
        color: '#AB936B',
        label: '面',
        value: chefInfo.creation,
      },
    ]
    items.push(...collect.filter((f) => f.value))

    const condiment: Item[] = [
      {
        color: '#5EB305',
        label: '酸',
        value: chefInfo.sour,
      },
      {
        color: '#FF7688',
        label: '甜',
        value: chefInfo.sweet,
      },
      {
        color: '#DA1C1B',
        label: '辣',
        value: chefInfo.spicy,
      },
      {
        color: '#004485',
        label: '咸',
        value: chefInfo.salty,
      },
      {
        color: '#004485',
        label: '苦',
        value: chefInfo.bitter,
      },
      {
        color: '#F8D32C',
        label: '鲜',
        value: chefInfo.tasty,
      },
    ]
    items.push(...condiment.filter((f) => f.value))
  }
  return items
}
</script>

<template>
  <n-popover trigger="hover" :keep-alive-on-hover="false">
    <template #trigger>
      <slot></slot>
    </template>
    <n-grid x-gap="12" y-gap="4" :cols="3">
      <n-gi v-for="f in items" :key="props.id + f.label">
        <n-flex align="center" :size="0">
          <n-button :color="f.color" size="small" strong circle>{{ f.label }}</n-button>
          <span class="number-text">{{ f.value }}</span>
        </n-flex>
      </n-gi>
    </n-grid>
  </n-popover>
</template>

<style lang="scss" scoped>
.number-text {
  flex: 1;
  background-color: rgb(#b99274, 0.4);
  margin-left: -10px;
  padding-left: 14px;
  padding-right: 10px;
  border-radius: 4px;
  font-weight: bold;
}
</style>
